<ng-container [formGroup]="form">
  <nz-form-item *ngIf="
  record.type === 'input' ||
  record.type === 'textarea' ||
  record.type === 'date' ||
  record.type === 'time' ||
  record.type === 'number' ||
  record.type === 'radio' ||
  record.type === 'checkbox' ||
  record.type === 'select' ||
  record.type === 'rate' ||
  record.type === 'switch' ||
  record.type === 'slider' ||
  record.type === 'uploadImg' ||
  record.type === 'uploadFile' ||
  record.type === 'cascader' ||
  record.type === 'treeSelect' ||
  record.type === 'uploadCustom'" [ngStyle]="isFlex ? { display: 'flex' }:{}"
    [class.wrap]="record.options.wrap"
  >
    <nz-form-label *ngIf="isFlex && !record.help" [ngStyle]="{ width: layoutConfig.labelWidth + 'px'}"
      [nzRequired]="required">{{record.label}}</nz-form-label>
    <nz-form-label *ngIf="isFlex && record.help" [ngStyle]="{ width: layoutConfig.labelWidth + 'px'}"
      [nzTooltipTitle]="record.help" [nzRequired]="required">{{record.label}}</nz-form-label>
    <nz-form-label [title]="record.label" *ngIf="!isFlex && !record.help" [nzXs]="isCol && layoutConfig.labelCol.xs"
      [nzSm]="isCol && layoutConfig.labelCol.sm" [nzMd]="isCol && layoutConfig.labelCol.md"
      [nzLg]="isCol && layoutConfig.labelCol.lg" [nzXl]="isCol && layoutConfig.labelCol.xl"
      [nzXXl]="isCol && layoutConfig.labelCol.xxl" [nzRequired]="required">{{record.label}}</nz-form-label>
    <nz-form-label [title]="record.label" *ngIf="!isFlex && record.help" [nzXs]="isCol && layoutConfig.labelCol.xs"
      [nzSm]="isCol && layoutConfig.labelCol.sm" [nzMd]="isCol && layoutConfig.labelCol.md"
      [nzLg]="isCol && layoutConfig.labelCol.lg" [nzXl]="isCol && layoutConfig.labelCol.xl"
      [nzXXl]="isCol && layoutConfig.labelCol.xxl" nz-tooltip [nzTooltipTitle]="record.help"
      [nzTooltipIcon]="captchaTooltipIcon" [nzRequired]="required">{{record.label}}</nz-form-label>
    <nz-form-control [ngStyle]="isFlex ? { 'flex-grow': '1', width: 'auto' } : {}"
      [nzXs]="isCol && layoutConfig.wrapperCol.xs" [nzSm]="isCol && layoutConfig.wrapperCol.sm"
      [nzMd]="isCol && layoutConfig.wrapperCol.md" [nzLg]="isCol && layoutConfig.wrapperCol.lg"
      [nzXl]="isCol && layoutConfig.wrapperCol.xl" [nzXXl]="isCol && layoutConfig.wrapperCol.xxl"
      [nzHasFeedback]="record.rules | hasRule" [nzErrorTip]="userErrorTpl">
      <ng-template #userErrorTpl let-control>
        <ng-container>
          {{control.errors?.message}}
        </ng-container>
        <!-- <ng-container *ngIf="control.hasError('duplicated')">
          The username is redundant!
        </ng-container> -->
      </ng-template>
      <ng-container [ngSwitch]="record.type">
        <ng-container *ngSwitchCase="'input'">
          <!-- <nz-input-group [nzSuffix]="suffixTemplateInfo" [nzPrefix]="prefixTemplateUser"> -->
            <nz-input-group *ngIf="!isSensitive(record.label) || !readonly  " [nzSuffix]="suffixTemplateInfo" [nzPrefix]="prefixTemplateUser">

            <input class="amber-input" *ngIf="record.options.maxLength" nz-input [formControlName]="record.key"
              [ngStyle]="{'width': record.options.width}" [placeholder]="record.options.placeholder || ''"
              [maxLength]="record.options.maxLength"
              [nzTooltipTitle]="record.important" nz-tooltip [nzTooltipColor]="'#FF7D00'" [nzTooltipPlacement]="'topLeft'" />
            <input class="amber-input" *ngIf="!record.options.maxLength"  nz-input [formControlName]="record.key" [ngStyle]="{'width': record.options.width}"
              [placeholder]="record.options.placeholder || ''"
              [nzTooltipTitle]="record.important" nz-tooltip [nzTooltipColor]="'#FF7D00'"  [nzTooltipPlacement]="'topLeft'" />
              
          </nz-input-group>

          <app-design-mask-info *ngIf="isSensitive(record.label) && readonly " [viewDesenInfo]="viewDesenInfo" [info]="getValueByKey(record.key)"></app-design-mask-info>
        </ng-container>
        <ng-container *ngSwitchCase="'textarea'">
          <nz-input-group [nzSuffix]="suffixTemplateInfo" class="ant-input-affix-wrapper-textarea-with-clear-btn">
            <textarea class="amber-input" nz-input *ngIf="record.options.maxLength" [formControlName]="record.key"
              [ngStyle]="{'width': record.options.width}" [placeholder]="record.options.placeholder || ''"
              [maxLength]="record.options.maxLength"
              [nzAutosize]="{ minRows: record.options.minRows, maxRows: record.options.maxRows }"
              [nzTooltipTitle]="record.important" nz-tooltip [nzTooltipColor]="'#FF7D00'" [nzTooltipPlacement]="'topLeft'" 
              ></textarea>
            <textarea class="amber-input" nz-input *ngIf="!record.options.maxLength" [formControlName]="record.key"
              [ngStyle]="{'width': record.options.width}" [placeholder]="record.options.placeholder || ''"
              [nzAutosize]="{ minRows: record.options.minRows, maxRows: record.options.maxRows }"
              [nzTooltipTitle]="record.important" nz-tooltip [nzTooltipColor]="'#FF7D00'" [nzTooltipPlacement]="'topLeft'" ></textarea>
          </nz-input-group>
        </ng-container>

        <ng-template #prefixTemplateUser>
          <span *ngIf="record.options.addonBefore">{{record.options.addonBefore}}</span>
        </ng-template>
        <ng-template #suffixTemplateInfo>
          <i nz-icon class="ant-input-textarea-clear-icon" style="margin-right: 4px;" nzType="close-circle"
            *ngIf="record.options.clearable && valueLengthGtZero()" (click)="clearValue()"></i>
          <span *ngIf="record.options.addonAfter">{{record.options.addonAfter}}</span>
        </ng-template>

        <ng-container *ngSwitchCase="'number'">
          <nz-input-number class="amber-input" [formControlName]="record.key" [ngStyle]="{'width': record.options.width}"
            [nzPlaceHolder]="record.options.placeholder" [nzMin]="record.options.min|inputNumberMinMax:'min'"
            [nzMax]="record.options.min|inputNumberMinMax:'max'"
            [nzPrecision]="record.options.precision"></nz-input-number>
        </ng-container>
        <ng-container *ngSwitchCase="'radio'">
          <app-design-form-item-radio [formControlName]="record.key" [record]="record"></app-design-form-item-radio>
        </ng-container>
        <ng-container *ngSwitchCase="'checkbox'">
          <!-- <nz-checkbox-group [ngModel]="record.options.options" (ngModelChange)="log($event)"></nz-checkbox-group> -->
          <app-design-form-item-checkbox [formControlName]="record.key"
            [options]="record.options.options"></app-design-form-item-checkbox>
        </ng-container>
        <ng-container *ngSwitchCase="'date'">
          <app-design-form-date-picker [formControlName]="record.key" [record]="record"></app-design-form-date-picker>
        </ng-container>
        <ng-container *ngSwitchCase="'select'">
          <nz-select [formControlName]="record.key" [nzDisabled]="isDisabled||readonly">
            <nz-option *ngFor="let lbl of record.options.options" [nzValue]="lbl.value"
              [nzLabel]="lbl.label"></nz-option>
          </nz-select>
        </ng-container>
        <ng-container *ngSwitchCase="'rate'">
          <nz-rate [formControlName]="record.key" [nzAllowHalf]="record.options.allowHalf"></nz-rate>
        </ng-container>
        <ng-container *ngSwitchCase="'slider'">
          <nz-slider [formControlName]="record.key"></nz-slider>
        </ng-container>
        <ng-container *ngSwitchCase="'switch'">
          <nz-switch [formControlName]="record.key"></nz-switch>
        </ng-container>
        <ng-container *ngIf="record.type === 'uploadCustom'">
          <app-design-form-upload-custom [formControlName]="record.key" [record]="record"
            (previewOutput)="previewOutput.emit($event)"></app-design-form-upload-custom>
        </ng-container>
      </ng-container>
    </nz-form-control>
  </nz-form-item>

  <ng-container *ngIf="record.type === 'divider'">
    <nz-divider [nzText]="record.label" [nzOrientation]="record.options.orientation || 'center'"></nz-divider>
  </ng-container>
  <ng-container *ngIf="record.type === 'alert'">
    <nz-form-item>
      <nz-form-control>
        <nz-alert [nzMessage]="record.label" [nzDescription]="record.options.description" [nzType]="record.options.type"
          [nzShowIcon]="record.options.showIcon" [nzCloseable]="record.options.closable"
          [nzBanner]="record.options.banner">
        </nz-alert>
      </nz-form-control>
    </nz-form-item>
  </ng-container>
  <ng-container *ngIf="record.type === 'text'">
    <nz-form-item>
      <nz-form-control>
        <div [ngStyle]="{ textAlign: record.options.textAlign }">
          <label [id]="record.key" [ngClass]="{ 'showRequiredMark': record.options.showRequiredMark }" [ngStyle]="{
              fontFamily: record.options.fontFamily,
              fontSize: record.options.fontSize,
              color: record.options.color
            }">
            {{record.label}}
          </label>
        </div>
      </nz-form-control>
    </nz-form-item>
  </ng-container>
  <ng-container *ngIf="record.type === 'button'">
    <button nz-button [nzType]="record.options.type" (click)="buttonClick()">
      {{record.label}}
    </button>
  </ng-container>
  <ng-container *ngIf="record.type === 'process'">
    <app-design-form-process-node [formControlName]="record.key"></app-design-form-process-node>
  </ng-container>
  <ng-container *ngIf="record.type === 'html'">
    <div [outerHTML]="record.options.defaultValue"></div>
  </ng-container>
</ng-container>